import type { FC } from 'react';
import {  useMemoizedFn } from 'ahooks';
import { ProImage } from '@/components';
import { TouchableOpacity } from 'react-native';
import styles from './styles';

type ImageItemProps = {
  url: string;
  index: number;
  onPress?: (index: number) => void;
}

const ImageItem: FC<ImageItemProps> = (props) => {
  const { url, index } = props;

  const onItemPress = useMemoizedFn(() => {
    props.onPress?.(index);
  });

  return (
    <TouchableOpacity
      activeOpacity={.8}
      onPress={onItemPress}
      style={styles.imgWrapper}
    >
      <ProImage
        style={styles.img}
        contentFit="cover"
        source={{ uri: url }}
      />
    </TouchableOpacity>
  );
}

export default ImageItem;